<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <title>CPK计算器</title>
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="./css/layuiAdminTheme.css" />
    <style type="text/css">
        .organizeName,
        .operation span:first-of-type {
            color: #1990FF;
        }
        .operation span:last-of-type {
            color: #f5222d;
        }

        .pageNav {
            margin: 0 auto;
            width: fit-content;
        }

        .pageNav a,
        .operation span {
            cursor: pointer;
            display: inline-block;
        }

        cite {
            cursor: default;
        }

        .twoRow {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .layui-table tr td:nth-of-type(3) {
            min-width: 5em;
        }

        td
        {
            white-space: nowrap;
            text-align: center;
        }

        label{
            width: auto;
        }

        .group{
            margin: 0 auto;
            width: 450px;
            height: auto;
        }
        .group div{
            width: 16%;
            height: 100%;
            float: left;
        }
    </style>
</head>
<body>
<div class="layui-form-item" style="width: 20%">
    <label class="layui-form-label">日期：</label>
    <div class="layui-input-block">
        <input name="thisDate" class="layui-input" id="thisDate" lay-verify="required" disabled="disabled">
    </div>
</div>
<form class="layui-form" action="" style="width: 100%" id="countForm">
    <div class="layui-form-item" style="width: 20%">
        <label class="layui-form-label">部门：</label>
        <div class="layui-input-block">
            <select name="deptName" id="deptName" lay-verify="required" lay-filter="deptName">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">LOT号:</label>
                <div class="layui-input-block">
                    <select name="orderNum" id="orderNum" lay-verify="required" lay-search lay-filter="orderNum">
                        <option value=""></option>
                    </select>
                </div>
            </div>
            <div class="layui-col-md2" style="margin-left: 10px;user-select: none">
                <div class="layui-form-mid layui-word-aux">仅显示未计算的LOT</div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">产品：</label>
                <div class="layui-input-block">
                    <input type="text" id="pinName" required  lay-verify="required" placeholder="先选择部门和lot号" autocomplete="off" disabled="disabled" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="width: 20%">

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <div class="layui-input-inline" style="width: 33%">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_1" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_2" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_3" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">取样数值：</label>
        <div class="layui-input-inline" style="width: 33%">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_4" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_5" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_6" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_7" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <div class="layui-input-inline" style="width: 33%">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_8" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_9" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" id="data_10" required  lay-verify="required" placeholder="请输入取样数值" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">规格数值：</label>
        <div class="layui-input-inline" style="width: 33%">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" name="lsl" id="lsl" required  lay-verify="required" placeholder="LSL/规格下限" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,3})?).*$/g, '$1')" name="usl" id="usl" required  lay-verify="required" placeholder="USL/规格上限" class="layui-input">
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label" style="width: auto;">规格中心值：</label>
                </div>
                <div class="layui-col-md3">
                    <input type="text" name="centerValue" id="centerValue" value="0" required  lay-verify="required" placeholder="规格中心值" autocomplete="off" class="layui-input" disabled="disabled">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label">机台号：</label>
                <div class="layui-input-inline">
                    <input type="text" name="machineNum" id="machineNum" required  lay-verify="required" placeholder="请输入机台号" class="layui-input">
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label">作业员：</label>
                <div class="layui-input-inline">
                    <select name="workerNo" lay-search id="workerNo" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="countBtn" id="countBtn">计 算 CPK</button>
            <button type="reset" id="resetBtn" class="layui-btn layui-btn-primary"> 重 置 </button>
        </div>
    </div>
    <div id="countResult" class="layui-card" style="display: none">
        <div class="layui-card-header" style="background-color: #393D49;color: white">计算结果</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md4">
                    <table class="layui-table" style="width: auto;">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>计算项</th>
                            <th>数值(保留3位小数)</th>
                            <th>等级评定</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CA(制程准确度)</td>
                            <td ID="CA_VALUE" style="color:#1E9FFF;"></td>
                            <td ID="CA_LEVEL"></td>
                        </tr>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CP(制程精密度)</td>
                            <td id="CP_VALUE" style="color:#1E9FFF;"></td>
                            <td id="CP_LEVEL"></td>
                        </tr>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CPK(制程能力指数)</td>
                            <td id="CPK_VALUE" style="color:#1E9FFF;"></td>
                            <td id="CPK_LEVEL"></td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" id="saveResult" class="layui-btn layui-bg-green"> 保 存 结 果 </button>
                </div>
                <div class="layui-col-md8">
                    <table class="layui-table" style="width: auto;">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>项名</th>
                            <th>等级划分</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CA(制程准确度)</td>
                            <td>
                                <div class="group">
                                    <div title="CA<12.5%" style="border-radius: 15px;background-color: #0df600"><b style="color:white;">A</b></div>
                                    <div title="12.5<CA<25%" style="border-radius: 15px;background-color: greenyellow"><b style="color:white;">B</b></div>
                                    <div title="25%<CA<50%" style="border-radius: 15px;background-color: #FFB800"><b style="color:white;">C</b></div>
                                    <div title="CA>50%" style="border-radius: 15px;background-color: #FF5722"><b style="color:white;">D</b></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CP(制程精密度)</td>
                            <td>
                                <div class="group">
                                    <div title="1.67<=CP" style="border-radius: 15px;background-color: #0df600"><b style="color:white;">A+</b></div>
                                    <div title="1.33<=CP<1.67" style="border-radius: 15px;background-color: greenyellow"><b style="color:white;">A</b></div>
                                    <div title="1.0<=CP<1.33" style="border-radius: 15px;background-color: #FFB800"><b style="color:white;">B</b></div>
                                    <div title="0.67<=CP<1.0" style="border-radius: 15px;background-color: #FF5722"><b style="color:white;">C</b></div>
                                    <div title="CP<0.67" style="border-radius: 15px;background-color: #ff0000"><b style="color:white;">D</b></div>
                                    <div title="∞" style="border-radius: 15px;background-color: #000000"><b style="color:white;">?</b></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#FF5722;font-weight: bold">CPK(制程能力指数)</td>
                            <td>
                                <div class="group">
                                    <div title="1.67<=CPK" style="border-radius: 15px;background-color: #0df600"><b style="color:white;">A+</b></div>
                                    <div title="1.33<=CPK<1.67" style="border-radius: 15px;background-color: greenyellow"><b style="color:white;">A</b></div>
                                    <div title="1.0<=CPK<1.33" style="border-radius: 15px;background-color: #FFB800"><b style="color:white;">B</b></div>
                                    <div title="0.67<=CPK<1.0" style="border-radius: 15px;background-color: #FF5722"><b style="color:white;">C</b></div>
                                    <div title="CPK<0.67" style="border-radius: 15px;background-color: #ff0000"><b style="color:white;">D</b></div>
                                    <div title="∞" style="border-radius: 15px;background-color: #000000"><b style="color:white;">?</b></div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>
</form>
<script src="./js/main.js" charset="utf-8"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/jquery" charset="utf-8"></script>-->
<script src="./layui/layui.js" charset="utf-8"></script>
<script src="./js/jQuery.main.js"></script>
<script src="./js/xm-select.js"></script>
<script>
    //表单是否正确标识符
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //日期选择器
        laydate.render({
            elem: '#thisDate',
            type: 'date',
            value: getRecentDay(0)
        });
    });
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        //部门下拉框生成
        $.ajax({
            url: url + '/sys-dept/listDept',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            success: function(res) {
                //显示前先判断是否为管理员
                $.ajax({
                    url: '/sys-user/getAdmin/'+sessionStorage.getItem('userId'),
                    method: 'GET',
                    async : false,
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code===200){
                            isAd=1;
                        }
                        else if (res.code===400){
                            isAd=0;
                            thisDept=res.data.dept;
                        }
                    }
                })
                //按照是否为管理员显示下拉框
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(isAd===1){
                            $("#deptName").append("<option value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>");
                        }else if (isAd===0&&res.data[i].dept===thisDept){
                            $("#deptName").append("<option selected='selected' value='" + res.data[i].id + "'>" + res.data[i].dept +"</option>").attr('disabled','disabled');
                        }
                    }
                    form.render('select');
                }
            }
        })
        //lot下拉框默认
        $.ajax({
            url: url + '/work-order/lotSelect',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            data: JSON.stringify({
                deptId: $('#deptName').val()
            }),
            success: function(res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        $("#orderNum").append("<option value='" + res.data[i].orderNum + "'>" + res.data[i].orderNum +"</option>");
                    }
                }
                form.render('select');
            }
        })
        //获取指派用户下拉框
        $.ajax({
            url: url + '/sys-user/userList',
            method: 'POST',
            async : false,
            contentType: 'application/json',
            data: JSON.stringify({
                userId:"",
                deptId: $('#deptName').val()
            }),
            success: function(res) {
                if (res.code == 200) {
                    for (var i = 0; i < res.data.length; i++) {
                        if(res.data[i].loginName==sessionStorage.getItem("loginName")){
                            $("#workerNo").append("<option selected='selected' value='" + res.data[i].loginName + "'>" + res.data[i].loginName+" "+res.data[i].userName + "</option>");
                        }else
                            $("#workerNo").append("<option value='" + res.data[i].loginName + "'>"+ res.data[i].loginName+" " + res.data[i].userName + "</option>");
                        //已指派人员默认选择
                    }
                    form.render('select');
                }
            }
        })
        //下拉框二级联动---点击部门下拉框
        form.on('select(deptName)', function(data) {
            //lot下拉框联动
            $.ajax({
                url: url + '/work-order/lotSelect',
                method: 'POST',
                async : false,
                contentType: 'application/json',
                data: JSON.stringify({
                    deptId: $('#deptName').val()
                }),
                success: function(res) {
                    $("#orderNum").empty()
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            $("#orderNum").append("<option value='" + res.data[i].orderNum + "'>" + res.data[i].orderNum +"</option>");
                        }
                    }
                    form.render('select');
                }
            })
            //产品框输入
            $.ajax({
                url: url + '/work-order/getPin/'+$('#orderNum').val(),
                method: 'GET',
                async : false,
                contentType: 'application/json',
                success: function(res) {
                    //先清空输入框
                    $('#pinName').val("");
                    if(res.code===200){
                        //输入框赋值
                        $('#pinName').val(res.data);
                    }
                }
            })
            //用户下拉框联动
            $.ajax({
                url: url + '/sys-user/userList',
                method: 'POST',
                async : false,
                contentType: 'application/json',
                data: JSON.stringify({
                    userId:"",
                    deptId: $('#deptName').val()
                }),
                success: function(res) {
                    $("#workerNo").empty();
                    if (res.code == 200) {
                        for (var i = 0; i < res.data.length; i++) {
                            if(res.data[i].loginName==sessionStorage.getItem("loginName")){
                                $("#workerNo").append("<option selected='selected' value='" + res.data[i].loginName + "'>" + res.data[i].loginName+" "+res.data[i].userName + "</option>");
                            }else
                                $("#workerNo").append("<option value='" + res.data[i].loginName + "'>"+ res.data[i].loginName+" " + res.data[i].userName + "</option>");
                            //已指派人员默认选择
                        }
                        form.render('select');
                    }
                }
            })
            form.render('select');
        });
        //下拉框二级联动---点击lot下拉框
        form.on('select(orderNum)', function(data) {
            //用户下拉框联动
            $.ajax({
                url: url + '/work-order/getPin/'+$('#orderNum').val(),
                method: 'GET',
                async : false,
                contentType: 'application/json',
                success: function(res) {
                    if(res.code===200){
                        $('#pinName').val(res.data);
                    }
                }
            })
        });
        //中心值联动
        $('#lsl').bind('input propertychange',function () {
            var lsl = Number($('#lsl').val());
            var usl = Number($('#usl').val());
            if(usl==""||usl==null){
                usl=0;
            }
            var center=(lsl+usl)/2;
            $('#centerValue').val(center.toFixed(3));
        });
        //中心值联动
        $('#usl').bind('input propertychange',function () {
            var lsl = Number($('#lsl').val());
            var usl = Number($('#usl').val());
            if(lsl==""||lsl==null){
                lsl=0;
            }
            var center=(lsl+usl)/2;
            $('#centerValue').val(center.toFixed(3));
        });
        //监听提交
        form.on('submit(countBtn)', function(){
            var lsl=$('#lsl').val()
            var usl=$('#usl').val()
            if(lsl>=usl){
                layer.msg("规格上下限填写不规范！下限应该小于上限")
            }else {
                //取样赋值
                var dataList=[];
                for(var i=1;i<=10;i++){
                    var str="#data_"+i;
                    var data=$(str).val();
                    //为空忽略
                    if(data==""||data==null){

                    }else
                        dataList.push(data)
                }
                //计算值
                $.ajax({
                    url: url + '/cpk-info/cpkCount',
                    method: 'POST',
                    async : false,
                    contentType: 'application/json',
                    data: JSON.stringify({
                        usl: $('#usl').val(),
                        lsl: $('#lsl').val(),
                        dataList:dataList
                    }),
                    success: function(res) {
                        $('#CA_VALUE').text(res.data.ca);
                        $('#CP_VALUE').text(res.data.cp);
                        $('#CPK_VALUE').text(res.data.cpk);
                        $('#CA_LEVEL').append(caLevel(res.data.ca));
                        $('#CP_LEVEL').append(cpLevel(res.data.cp));
                        $('#CPK_LEVEL').append(cpkLevel(res.data.cpk));
                    }
                })
                //结果展示，按钮禁用
                $('#countResult').removeAttr("style")
                $('#countBtn').attr('disabled',true).addClass('layui-btn-disabled')
                //form表单禁用,防止篡改
                $('#deptName').attr('disabled',true)
                $('#orderNum').attr('disabled',true)
                $('#usl').attr('disabled',true)
                $('#lsl').attr('disabled',true)
                $('#machineNum').attr('disabled',true)
                $('#workerNo').attr('disabled',true)
            }
            form.render('select');
            return false;
        });
        //重置按钮触发事件
        $('#resetBtn').click(function () {
            //form表单恢复
            $('#deptName').attr('disabled',false)
            $('#orderNum').attr('disabled',false)
            $('#usl').attr('disabled',false)
            $('#lsl').attr('disabled',false)
            $('#machineNum').attr('disabled',false)
            $('#workerNo').attr('disabled',false)
            //恢复按钮和隐藏
            $('#countResult').css('display','none')
            $('#countBtn').attr('disabled',false).removeClass('layui-btn-disabled')
            $('#saveResult').attr('disabled',false).removeClass('layui-btn-disabled')
            //清空元素
            $('#CA_LEVEL').empty();
            $('#CP_LEVEL').empty();
            $('#CPK_LEVEL').empty();
            form.render('select')
        })
        //结果保存方法
        $('#saveResult').click(function () {
            var ca=$('#CA_VALUE').text().replace('%','');
            var cp=$('#CP_VALUE').text();
            var cpk=$('#CPK_VALUE').text();
            //取样赋值
            var dataList=[];
            for(var i=1;i<=10;i++){
                var str="#data_"+i;
                var data=$(str).val();
                //为空忽略
                if(data==""||data==null){

                }else
                    dataList.push(data)
            }
            if(cp=="∞"||cp==""||cp==null||cpk=="∞"||cpk==""||cpk==null){
                layer.alert('保存失败！存在不合理的CP或CPK结果！<br>' +
                    '请确认取样数值是否合理！', {
                    icon: 2,
                    skin: 'layer-ext-demo' //见：扩展说明
                })
            }else {
                //询问
                let confirm1=layer.confirm('确认保存此次结果吗？', {
                        btn: ['确定','取消']},function(){
                    $.ajax({
                        url: url + '/cpk-info/saveResult',
                        method: 'POST',
                        async : false,
                        contentType: 'application/json',
                        data: JSON.stringify({
                            ca: ca,
                            cp: cp,
                            cpk:cpk,
                            orderNum: $('#orderNum').val(),
                            machineNum: $('#machineNum').val(),
                            workerNo: $('#workerNo').val(),
                            pinName: $('#pinName').val(),
                            deptId: $('#deptName').val(),
                            dataList: dataList,
                            lsl:$('#lsl').val(),
                            usl:$('#usl').val()
                        }),
                        success: function(res) {
                            if(res.code==200){
                                layer.alert(res.msg, {
                                    icon: 1,
                                    skin: 'layer-ext-demo' //见：扩展说明
                                })
                                //按钮禁用
                                $('#saveResult').attr('disabled',true).addClass('layui-btn-disabled').removeClass('layui-bg-green')
                            }else{
                                layer.alert(res.msg, {
                                    icon: 2,
                                    skin: 'layer-ext-demo' //见：扩展说明
                                })
                            }
                        }
                    })
                    },function () {
                        layer.close(confirm1);
                    }
                )
            }
        })
    });
</script>
</body>
</html>
